<template>
  <div class="content-wrap">
    <div class="content article">
      <header class="article-header">
        <h1 class="article-title">
          {{ post.title }}
        </h1>
        <div class="article-meta">
          <span class="item">{{ post.createAt }}</span>
          <span class="item">分类：
            <router-link class="cat" :to="{ name: 'Category', params: { categoryId: post.category.id }}">{{ post.category.name }}</router-link>
          </span>
          <span class="item post-views">阅读({{ post.views }})</span>
          <span class="item">评论(0)</span>
          <span class="item"></span>
        </div>
      </header>
      <article class="article-content" v-html="postContent"></article>
      <div class="post-actions">
        <a href="javascript:;" class="post-like action action-like" @click="upVote">
          <i class="fa fa-thumbs-o-up"></i>赞(<span>{{ post.upVote }}</span>)
        </a>
        <a href="javascript:;" class="action action-rewards" @click="downVote">
          <i class="fa fa-thumbs-o-down"></i>踩(<span>{{ post.downVote }}</span>)
        </a>
      </div>
      <div class="post-copyright">
        转载请注明出处：{{ post.title }}
      </div>

      <div class="article-tags" v-if="post.tags">标签：
        <router-link  v-for="tag in splitTags" :key="tag" :to="{ name: 'Tag', params: { tagName: tag }}" rel="tag">{{ tag }}</router-link>
      </div>

      <div class="article-author">
        <img :src="post.author.avatar" class="avatar avatar-50 photo" height="50" width="50">
        <h4>Hi，我是{{ post.author.nickName }}</h4>
        {{ post.author.description }}
      </div>

      <nav class="article-nav">
        <span class="article-nav-prev">上一篇<br>
          <div v-if="post.prePostId">
            <router-link :title="post.prePostTitle" :to="{ name: 'Post', params: { postId: post.prePostId }}" rel="prev">
                {{ post.prePostTitle }}
            </router-link>
          </div>
          <div v-else>
            无
          </div>
        </span>
        <span class="article-nav-next">下一篇<br>
          <div v-if="post.nextPostId">
            <router-link :title="post.nextPostTitle" :to="{ name: 'Post', params: { postId: post.nextPostId }}" rel="next">
                {{ post.nextPostTitle }}
            </router-link>
          </div>
          <div v-else>
            无
          </div>
        </span>
      </nav>
    </div>
  </div>
</template>

<script>
  import {getById,upVoteTo,downVoteTo} from '../api/post'

  var md = require('markdown-it')({
    highlight: function (str, lang) {
      if (lang && hljs.getLanguage(lang)) {
        try {
          return '<pre class="hljs"><code>' +
            hljs.highlight(lang, str, true).value +
            '</code></pre>';
        } catch (__) {}
      }

      return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
    }
  });

  export default {
    name: "post",
    props: ['postId'],
    data() {
      return {
        post: {
          category: {
            id: 1
          },
          author: {},
          tags: '',
          content: ''
        }
      }
    },
    computed: {
      splitTags() {
        if (this.post.tags)
          return this.post.tags.split(',')
        else return []
      },
      postContent() {
        return md.render(this.post.content)
      }
    },
    methods: {
      getPostById() {
        getById(this.postId).then(res => {
          this.post = res.data
        })
      },
      upVote() {
        upVoteTo(this.postId).then(res => {
          if (res.code == 0) {
            if (res.data == 0) {
              this.$message({message: '点赞成功',type: 'success'});
              this.getPostById()
            } else if(res.data == -1){
              this.$message({message: '您已经点赞成功，无需重复操作',type: 'warning'});
            }
          }
        })
      },
      downVote() {
        downVoteTo(this.postId).then(res => {
          if (res.code == 0) {
            if (res.data == 0) {
              this.$message({message: '点踩成功',type: 'success'});
              this.getPostById()
            } else if(res.data == -1){
              this.$message({message: '您已经点踩成功，无需重复操作',type: 'warning'});
            }
          }
        })
      }
    },
    created() {
      this.getPostById()
    }, watch: {
      "$route": function (to, from) {
        this.getPostById()
        //from 对象中包含当前地址
        //to 对象中包含目标地址
        //其实还有一个next参数的，这个参数是控制路由是否跳转的，如果没写，可以不用写next()来代表允许路由跳转，如果写了就必须写next(),否则路由是不会生效的。
      }
    }
  }
</script>

<style scoped>

</style>
